<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <meta name="create" content="2023-11-01" />
    <meta name="desc" content="发光边角悬停效果" />
    <title>发光边角悬停效果</title>
  </head>
  <body>
    <ul class="cards-wrapper">
      <li class="cards-item" style="--clr: #0f0"></li>
      <li class="cards-item" style="--clr: #f00"></li>
      <li class="cards-item" style="--clr: #00f"></li>
      <li class="cards-item" style="--clr: #0ff"></li>
    </ul>
    <style>
      li {
        list-style: none;
        display: block;
      }

      body {
        background: #333;
      }
      .cards-wrapper {
        margin: 0 auto;
        display: flex;
        gap: 50px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        background: #99f;
      }
      .cards-item {
        width: 20%;
        --border-radius: 20px;
        padding-bottom: 30%;
        background: #aaa2;
        position: relative;
        overflow: hidden;
        border-radius: var(--border-radius);
        touch-action: none;
      }
      .cards-item::before {
        position: absolute;
        content: '';
        left: var(--x);
        top: var(--y);
        width: 200%;
        padding-bottom: 200%;
        background-image: radial-gradient(var(--clr), transparent, transparent);
        transform: translate(-50%, -50%);
        transition:
          0.5s,
          top 0s,
          left 0s;
        opacity: 0;
      }
      .cards-item:hover::before,
      .cards-item.hover::before {
        opacity: 1;
      }
      .cards-item::after {
        background: #6667;
        border-radius: var(--border-radius);
        content: '';
        position: absolute;
        inset: 2px;
      }
      @media (max-width: 450px) {
        .cards-item {
          width: 80%;
          padding-bottom: 100%;
        }
      }
    </style>
    <script>
      const items = document.querySelectorAll('.cards-item')
      items.forEach((item) => {
        item.addEventListener('pointermove', (e) => {
          const { offsetLeft, offsetTop } = item
          const x = e.pageX - offsetLeft
          const y = e.pageY - offsetTop
          item.style.setProperty('--x', x + 'px')
          item.style.setProperty('--y', y + 'px')
        })
        item.addEventListener('pointerenter', (e) => {
          item.classList.add('hover')
        })
        item.addEventListener('pointerleave', (e) => {
          item.classList.remove('hover')
        })
      })
    </script>
    <pre>
     问题：
     - 鼠标在item外移动，也响应？
      - item overflow:hidden 就不会触发mousemove了
     - 亮色跟随鼠标很生硬:`transition: left 0.3s,top 0.3s;`
      - 不卡：`left 0s`
    - ?怎样在移动端生效？
      - 移动端 在 pointermove 且不产生屏幕的手势(平移):样式 'touch-action'
      - 移动端hover效果模拟:enter时加类，leave时remove
        - 移动端点中后是:hover
    </pre>
    <dl>
      <dt>资源</dt>
      <dd><a href="https://www.youtube.com/watch?v=CJ26NLtdzPA">视频：youtube </a></dd>
      <dd><a href="https://www.bilibili.com/video/BV1bu4y1E7fe">视频：bilibili </a></dd>
    </dl>
  </body>
</html>
